<script setup lang="ts">
import { onMounted, ref,watch} from 'vue'
import { useRouter } from 'vue-router'
import { navTags as useNavTags } from '@/store'
import sortable from 'sortablejs'      // 文档 https://www.itxst.com/sortablejs/neuinffi.html，可多组拖动

onMounted(() => {
	initSortable()
	navTags.setSortAttr()
})

const tagsRef = ref()
const navTags = useNavTags()
const router = useRouter()
const activeTagName=ref('')


watch(()=>navTags.tags,(v)=>{
	  const name=v.find(v=>v.active)?.name 
	  if(name)
	  activeTagName.value=name
},{immediate:true,deep:true})

function initSortable (){
	// const dragArea = tagsRef.value.$el
	const dragArea=document.querySelector('.fast-navTags .ant-tabs-nav-list')
	const ops = {
		animation: 100,
		dataIdAttr: 'itemId',
		onEnd: (_evt: any) => {
			// console.log(sortableInstance.toArray());
			setTimeout(()=>{navTags.setSort(sortableInstance.toArray())},100)
		},
	}
	//初始化
	const sortableInstance = sortable.create(dragArea, ops)
}
function bindGo(k:string) {
	// console.log('hhhh')
	router.push(navTags.tags.find(v=>v.name==k)!.fullPath)
}
function delTag(k:string){
   navTags.deleteTag(navTags.tags.findIndex(v=>v.name==k))
}
</script>

<template>
    <a-tabs
		  class="fast-navTags"
      v-model:activeKey="activeTagName"
      size="small"
			hideAdd
			type="editable-card"
			ref="tagsRef"
			@edit="delTag"
			@tabClick='bindGo'
    >
		<a-tab-pane v-for="(item, index) in navTags.tags" :key="item.name" :closable="!item.affix" :itemId="item.name" >
		 <template #tab>
			<a-dropdown trigger="contextmenu"  :key="item.name" placement="bottom">
				<span>{{ item.title }}</span>
				<template #overlay>
					<a-menu>
						<a-menu-item @click="navTags.deleteTag(index)" :disabled="item.affix">关闭当前</a-menu-item>
						<a-menu-item @click="navTags.clearRightTags(index)">关闭右侧</a-menu-item>
						<a-menu-item @click="navTags.clearLeftTags(index)">关闭左侧</a-menu-item>
						<a-menu-item @click="navTags.clearOtherTags(index)">关闭其他</a-menu-item>
						<a-menu-item @click="navTags.clearTags()">关闭所有</a-menu-item>
					</a-menu>
				</template>
			</a-dropdown>
		 </template>
		</a-tab-pane>
		</a-tabs>

		
</template>

<style scoped lang="less">
:deep(.ant-tabs-nav){
	margin: 0 !important;
}
:deep(.ant-tabs-tab){
	padding: 3px 10px !important;
}
</style>
